这个是一个经典的html布局:上、中、下的结构布局的一个小例子
<!DOCTYPE html>
<html>
<head lang= "en">
<meta charset= "UTF-8">
<title>MUC Manager </title>
<style type= "text/css">
html,body {width :100 %; height:100 %; margin: 0 ;}
#Container {position :relative ; width : 100 %; height:100 %; }
#Header {position :relative ; width :100 %; height: 10 %; background-color: #0E2D5F;}
#Content {position :relative ; width :100 %; height:80 %;}
#Content-left {width :20 %; height:100 %; float:left;background-color: #00ee00;}
#Content-right {width :80 %; height: 100 %;float :left ; background-color : #0b97c4;}
#Footer {position :relative ;width :100 %; height: 10 %;background-color : #5f5f5f;}
</style>
</head>
<body>
<!-- 此处用了传统的三段式结构:Container代表整个容器,Header代表容器的上部,Content代表容器的中部也就是内容部分,Footer代表容器的底部 -->
<div id="Container" >
<div id= "Header"></div>
<div id = "Content">
<div id="Content-left" >左</ div>
<div id="Content-right" >右</ div>
</div>
<div id= "Footer"></div>
</div>
</body>
</html>